<template>
  <div class="register">
    <div class="right"><img src="../assets/img/phonelogo.jpg"></div>
    <div class="left">
      <div class="fromBox">
        <el-form :model="Rform" status-icon :rules="ruless" ref="Rform" class="ruleForm" v-if="user">
          <div class="text">用户注册</div>
          <el-form-item prop="username" class="input">
            <el-input v-model="Rform.username" placeholder="请输入用户名..." autocomplete="off" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password" class="input">
            <el-input type="password" placeholder="请输入密码..." v-model="Rform.password" autocomplete="off" prefix-icon="el-icon-unlock" :show-password="true"></el-input>
          </el-form-item>
          <el-form-item prop="tel" class="input">
            <el-input placeholder="请输入电话号码..." v-model="Rform.tel" autocomplete="off" prefix-icon="el-icon-phone-outline"></el-input>
          </el-form-item>
          <el-form-item prop="sex" class="input" label="性别:" label-width="50px">
            <div style="text-align:left;padding-left:40px">
              <el-radio v-model="Rform.sex" label="1" style="width:100px">男</el-radio>
              <el-radio v-model="Rform.sex" label="0">女</el-radio>
            </div>
          </el-form-item>
          <el-form-item class="btnbox" style="margin-top:30px">
            <el-button type="primary" @click="reginst('Rform')" class="btn1">确定</el-button>
            <el-button @click="reset('Rform')" class="btn2">取消</el-button>
          </el-form-item>
        </el-form>
        <el-form :model="ADform" status-icon :rules="rules" ref="form" class="ruleForm" v-else>
          <div class="text">管理员注册</div>
          <el-form-item prop="username" class="input">
            <el-input v-model="ADform.username" placeholder="请输入用户名..." autocomplete="off" prefix-icon="el-icon-user"></el-input>
          </el-form-item>
          <el-form-item prop="password" class="input">
            <el-input type="password" placeholder="请输入密码..." v-model="ADform.password" autocomplete="off" prefix-icon="el-icon-unlock" :show-password="true"></el-input>
          </el-form-item>
          <el-form-item class="btnbox" style="margin-top:152px">
            <el-button type="primary" @click="ADreginst('ADform')" class="btn1">确定</el-button>
            <el-button @click="reset('ADform')" class="btn2">取消</el-button>
          </el-form-item>
        </el-form> 
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          callback()
        }
      };
      var validatetel = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号码'))
        } else {
          callback()
        }
      };
      var validatesex = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择性别'))
        } else {
          callback()
        }
      }
    return {
      code:'',
      number: '',
      user: true,
      Rform: {
        username: '',
        password: '',
        tel: '',
        sex: ''
      },
      ADform: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { validator: validatePass, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass2, trigger: 'blur' }
        ]
      },
      ruless: {
        username: [
          { validator: validatePass, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        tel: [
          { validator: validatetel, trigger: 'blur' },
          { min: 11, max: 11, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        sex: [
          { validator: validatesex, trigger: 'blur'}
        ]
      }
    }
  },
  components: {},
  created ()  {
    this.getselectList()
  },
  methods: {
      // 获取cookie
      getselectList () {
        this.user = this.$route.params.user
      },
      // 用户确定注册
      async reginst (formName) {
        const res = await this.$http.post('user/add', this.Rform)
        console.log(res)
        if (res.data.status === 200) {
          this.$message.success('注册成功！')
          // this.$refs[formName].resetFields()
          this.$router.push({name: 'login',params:{user: this.user}})
        } else {
          this.$message.error(res.data.msg)
        }
      },
      // 取消注册
      reset (formName) {
        this.$router.push({name: 'login',params:{user: this.user}})
      },
      // 管理员确定注册
      async ADreginst (formName) {
        const res = await this.$http.post('admin/add', this.ADform)
        console.log(res)
        if (res.data.status === 200) {
          this.$message.success('注册成功！')
          // this.$refs[formName].resetFields()
          this.$router.push({name: 'login',params:{user: this.user}})
        } else {
          this.$message.error(res.data.msg)
        }
      }
  }
}
</script>

<style scoped lang="stylus">
.register
  height 100%
  width 100%
.right,.left
  float left
  display inline-block
  width 50%
  height 100%
  text-align center
  img 
    margin-top 100px  
  .fromBox
    margin-top 150px
    background #fff
    .ruleForm
      padding 20px 10px 5px 10px
      width 400px
      height 400px
      border #888 solid 1px
      margin 0 auto
      border-radius 5px
      box-shadow 10px 10px 10px -10px #888
      .text
        padding 0 0 50px 5px
        font-size 24px
        font-weight 600
        color #444
        text-align left
      .input
        padding 0 10px 0 10px
    .forget
      font-size 14px
      margin-top -5px
      padding-right 20px
      text-align right
      cursor pointer
    .forget:hover
      color blue
    #code
      width 120px
      border 0
      color blue
      font italic bold 24px/38px Arial
      vertical-align baseline
      bottom 0
      position absolute
      margin-left 20px
      letter-spacing 2px
  .btnbox
    margin-top 60px
    .btn1,.btn2
      width 150px
</style>
